<template>
  <!-- 消息中心 -->
  <div class="informationCenter">
    <!-- 顶部导航 -->
    <van-nav-bar title="消息中心" left-arrow @click-left="$router.go(-1)">
      <template #right @click="handleTableChange">
        排序
        <van-icon name="sort" size="18" />
      </template>
    </van-nav-bar>

    <!-- 标签页 -->
    <van-tabs
      v-model="active"
      color="#fc3"
      title-active-color="#039"
      line-width="82"
      title-inactive-color="#666"
      @click="switchInformation"
    >
      <!-- 全部消息 -->
      <van-tab title="全部消息">
        <allInformation :allTheNews="allTheNews" />

        <!-- 分页 -->
        <van-pagination
          v-show="allTheNews.pages > 1"
          v-model="allTheNews.current"
          :page-count="allTheNews.pages"
          mode="multi"
          :show-page-size="0"
          @change="changePage"
        />
      </van-tab>
      <!-- 系统消息 -->
      <van-tab title="系统消息">
        <systemInformation :systemTheNews="systemTheNews" />

        <!-- 分页 -->
        <van-pagination
          v-show="systemTheNews.pages > 1"
          v-model="systemTheNews.current"
          :page-count="systemTheNews.pages"
          mode="multi"
          :show-page-size="0"
          @change="changePage"
        />
      </van-tab>
      <!-- 个人消息 -->
      <van-tab title="个人消息">
        <personalInformation :personalTheNews="personalTheNews" />

        <!-- 分页 -->
        <van-pagination
          v-show="personalTheNews.pages > 1"
          v-model="personalTheNews.current"
          :page-count="personalTheNews.pages"
          mode="multi"
          :show-page-size="0"
          @change="changePage"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// 引入
import { GetInformationList } from "@/request/api";
import allInformation from "@/components/allInformation";
import systemInformation from "@/components/systemInformation";
import personalInformation from "@/components/personalInformation";
export default {
  data() {
    return {
      active: 0,
      // 全部消息
      allTheNews: [],
      // 系统消息
      systemTheNews: [],
      // 个人消息
      personalTheNews: [],
    };
  },
  created() {
    GetInformationList({ current: 1, size: 10, type: this.active }).then(
      (res) => {
        this.allTheNews = res.data;
        // console.log(this.allTheNews);
      }
    );
  },
  components: {
    allInformation,
    systemInformation,
    personalInformation,
  },
  methods: {
    //   点击切换时发请求获取数据
    switchInformation() {
      GetInformationList({ current: 1, size: 10, type: this.active }).then(
        (res) => {
          //   console.log(res.data);
          // 系统
          this.systemTheNews = res.data;
          // 个人
          this.personalTheNews = res.data;
        }
      );
    },

    // 分页按钮
    changePage() {
      GetInformationList({
        current: this.allTheNews.current,
        size: 10,
        type: this.active,
      }).then((res) => {
        // 全部
        this.allTheNews = res.data;
        // 系统
        this.systemTheNews = res.data;
        // 个人
        this.personalTheNews = res.data;
      });
    },

    // 排序
    handleTableChange(pagination, filters, sorter) {
      if (sorter.order == "ascend") {
        this.data.sort((a, b) => {
          return new Date(b.createdDate) - new Date(a.createdDate);
        });
      } else {
        this.data.sort((a, b) => {
          return new Date(a.createdDate) - new Date(b.createdDate);
        });
      }
    },
  },
};
</script>
 
<style lang = "less" scoped>
/* 顶部导航 */
.van-hairline--bottom {
  background-color: #003399;
}
/deep/.van-nav-bar__title,
/deep/.van-icon,
/deep/.van-nav-bar__right {
  color: #ffffff;
}
</style>